<template>
  <div class="index">
   <header1></header1>
   <a :href="url">支付</a>
   <!-- {{getCatelist}} -->
   <div class="navbar_con">
      <div class="navbar">
        <h1 class="fl">商品分类</h1>
        <ul class="navlist fl">
          <li><a href="">首页</a></li>
          <li class="interval">|</li>
          <li><a href="">真划算</a></li>
          <li class="interval">|</li>
          <li><a href="">抽奖</a></li>
        </ul>
      </div>
    </div>
  
    <div class="pos_center_con clearfix">
      <ul class="slide">
        <li v-for="b in bannerlist" :key="b.url"><a :href="b.url"><img src="../../static/images/banner04.jpg" alt="幻灯片01"></a></li>
       
      </ul>
      <div class="prev"></div>
      <div class="next"></div>
      <ul class="points">
        <!-- <li class="active"></li>
        <li></li>
        <li></li>
        <li></li> -->
      </ul>
      <ul class="sub_menu">			
        <li v-for="i in catelist" :key="i.name" @mouseover="selectfenleitwo(i.id)">
          <div class="level1" >

            <a href="#" >{{i.name}}</a>
          </div>
          <div class="level2">
                    
                    <div class="list_group">
                        <div class="group_name fl">{{i.name}}} &gt;</div>
                        <div class="group_detail fl">
                            
                            <a href="/list.html?cat=115" v-for="i in catelist2" :key="i.name">{{i.name}}</a>
                            
                            <!-- <a href="/list.html?cat=116">游戏手机</a>
                            
                            <a href="/list.html?cat=117">老人机</a>
                            
                            <a href="/list.html?cat=118">对讲机</a> -->
                            
                        </div>
                    </div>
            
          </div>
         
        </li>
       
      </ul>
  
      <div class="news">
        <div class="news_title">
          <h3>快讯</h3>
          <a href="#">更多 &gt;</a>
        </div>
        <ul class="news_list">
          <li><a href="#">i7顽石低至4199元</a></li>
          <li><a href="#">奥克斯专场 正1匹空调1313元抢</a></li>
          <li><a href="#">荣耀9青春版 高配 领券立减220元</a></li>
          <li><a href="#">美多探索公益新模式</a></li>
          <li><a href="#">i7顽石低至4199元</a></li>
          <li><a href="#">正1匹空调1313元抢</a></li>
          <li><a href="#">奥克斯专场 正1匹空调1313元抢</a></li>
        </ul>
        <a href="#" class="advs"><img src="../../static/images/adv01.jpg"></a>
      </div>
    </div>
    <!-- {{getsublist}} -->
    <div class="list_model" v-for='i in goodslist' :key="i.name">
      <div class="list_title clearfix">
        <h3 class="fl" id="model01">{{i.name}}</h3>
        <div class="subtitle fr">
          <a href="#" class="active">时尚新品</a>
          <a href="#">加价换购</a>
          <a href="#">畅想低价</a>
          <a href="#">手机配件</a>
          <a href="#">精选单品</a>
        </div>
      </div>
      <div class="goods_con clearfix">
        <div class="goods_banner fl">
          <img src="../../static/images/banner01.jpg">
         
          <div class="key_words" >
            <a href="#" v-for="sub in i.next_cate" :key="sub.name">{{sub.name}}</a>
            
          </div>
        
        </div>
        <ul class="goods_list fl">
          <li v-for='g in i.goods' :key="g.name">					
           
              <!-- <router-link :to="{name:'Detail',params:{'id':g.id}}" >
                <a href=""><img src="../../static/images/goods/goods003.jpg"></a></router-link> -->
            <h4><a href="#" title="360手机 N6 Pro 全网通 6GB+128GB 极夜黑">{{g.name}}</a></h4>
            <div class="prize">¥ {{g.price}}</div>
          </li>
         
        </ul>
      </div>
    </div>
  
    <div class="list_model model02">
        <div class="list_title clearfix">
          <h3 class="fl" id="model01">2F 电脑数码</h3>
          <div class="subtitle fr">
            <a href="#" class="active">时尚新品</a>
            <a href="#">加价换购</a>
            <a href="#">畅想低价</a>
            <a href="#">配件</a>
            <a href="#">精选单品</a>
          </div>
        </div>
        <div class="goods_con clearfix">
          <div class="goods_banner fl">
            <img src="../../static/images/banner02.jpg">
            <div class="channel">
              <a href="#">电脑</a>
              <a href="#">数码</a>
              <a href="#">配件</a>
              <a href="#">潮电子</a>
            </div>
            <div class="key_words">
              <a href="#">Apple</a>
              <a href="#">神舟战神</a>
              <a href="#">单反相机</a>
              <a href="#">智能家居</a>
              <a href="#">智能路由</a>
              <a href="#">限时抢</a>
              <a href="#">顽石</a>
              <a href="#">微单</a>
              <a href="#">耳机</a>
              <a href="#">投影机</a>
            </div>
          </div>
          <ul class="goods_list fl">
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods008.jpg"></a>
                <h4><a href="#" title="华硕明星爆款 八代i7顽石低至4199">华硕明星爆款 八代i7顽石低至4199</a></h4>
                <div class="prize">¥ 4199.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods002.jpg"></a>
                <h4><a href="#">iphoneX N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 7788.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods001.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 1988.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods004.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 3688.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods005.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 4288.80</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods003.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 2699.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods002.jpg"></a>
                <h4><a href="#">iphoneX N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 7788.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods001.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 1988.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods004.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 3688.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods005.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 4288.80</div>
              </li>
          </ul>
        </div>
      </div>
    
      <div class="list_model model03">
        <div class="list_title clearfix">
          <h3 class="fl" id="model01">3F 家居家装</h3>
          <div class="subtitle fr">
            <a href="#" class="active">生活用品</a>
            <a href="#">厨房用品</a>
            <a href="#">精品家具</a>
            <a href="#">家装建材</a>
          </div>
        </div>
        <div class="goods_con clearfix">
          <div class="goods_banner fl">
            <img src="../../static/images/banner03.jpg">
            <div class="channel">
              <a href="#">家居日用</a>
              <a href="#">家纺寝居</a>
              <a href="#">住宅家具</a>
            </div>
            <div class="key_words">
              <a href="#">厨具餐饮</a>
              <a href="#">被子</a>
              <a href="#">实木床</a>
              <a href="#">箭牌马桶</a>
              <a href="#">指纹锁</a>
              <a href="#">电饭煲</a>
              <a href="#">热水器</a>
              <a href="#">席梦思</a>
              <a href="#">沙发</a>
              <a href="#">酒柜</a>
            </div>
          </div>
          <ul class="goods_list fl">
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods009.jpg"></a>
                <h4><a href="#" title="维达3层超韧120抽软抽纸每提4包【大规格L】V2240(4包)">维达3层超韧120抽软抽纸每提4包【大规格L】V2240(4包)</a></h4>
                <div class="prize">¥ 18.80</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods002.jpg"></a>
                <h4><a href="#">iphoneX N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 7788.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods001.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 1988.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods004.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 3688.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods005.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 4288.80</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods003.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 2699.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods002.jpg"></a>
                <h4><a href="#">iphoneX N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 7788.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods001.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 1988.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods004.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 3688.00</div>
              </li>
              <li>					
                <a href="#" class="goods_pic"><img src="../../static/images/goods/goods005.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="prize">¥ 4288.80</div>
              </li>
          </ul>
        </div>
      </div>
  
      <footer1></footer1>
  </div>
</template>


<script>
import Header1 from '@/components/Header'
import Footer1 from '@/components/Footer'
import {send} from '../../static/js/oss'
import {select_feilei_one}  from './axios_api/api.js'
import {select_feilei_two}  from './axios_api/api.js'
export default{
  name:'index',
  components:{
    header1:Header1,
    footer1:Footer1
  },
  data:function(){
    return{
    //   catelist:"",
      catelist:[{"name":'113'},{"name":'1134'},{"name":'afasdf'},{"name":'fddff'},{"name":'112e2e3'},{"name":'dvs'}],

      
      catelist2_new:[{"name":'dfa'},{"name":'bsdfg'},{"name":'afasdf'},{"name":'fddff'},{"name":'112e2e3'},{"name":'dvs'}],
      catelist2:"",
      url:'',
      bannerlist:[{'url':'http://www.baidu.com','image_url':'http://localhost:8000/api/upload/1.jpg'}],
      goodslist:[{'name':'一级分类','next_cate':[{'name':'二级分类1'},{'name':'二级分类2'}],'goods':[{'name':'商品一'},{'name':'商品2'}]}]
        
    }
  },
  methods:{
    select_one(){
      select_feilei_one()
      .then(res=>{
        console.log(res)
        this.catelist = res.data
      })
    },
    selectfenleitwo(id){
        console.log(id)
      var data = {"p_id":id}
      select_feilei_two(data)
      .then(res=>{
          console.log(res)        
          this.catelist2 = res.data
      })
  },

    },
  
  created() {
     this.select_one()
     this.selectfenleitwo()
  },
  
}
</script>
